import React, { Component } from 'react'
import 'antd/dist/antd.css'
import { Carousel } from 'antd';
import axios from 'axios'

class Place extends Component {

    //默认state值
    state = {
        list: []
    }

    //请求axios数据
    componentDidMount() {
        axios.get('/api/list').then((res) => {
            this.setState({
                list: res.data
            })
        })
    }

    render() {
        let { list } = this.state
        return (
            <div className='place'>
                <div className='lbt'>
                    <Carousel autoplay>
                        <div>
                            <h3 style={contentStyle}>1</h3>
                        </div>
                        <div>
                            <h3 style={contentStyle}>2</h3>
                        </div>
                        <div>
                            <h3 style={contentStyle}>3</h3>
                        </div>
                        <div>
                            <h3 style={contentStyle}>4</h3>
                        </div>
                    </Carousel>
                </div>
                <div className='list'>
                    {
                        list && list.length ? list.map((item,index) => {
                            return (
                                <div className='item' key={index}>
                                    <img src={item.img} alt='' />
                                    <span>{item.title}</span>
                                </div>
                            )
                        }) : ''
                    }
                </div>
            </div>
        )
    }
}

const contentStyle = {
    height: '160px',
    color: '#fff',
    lineHeight: '160px',
    textAlign: 'center',
    background: '#364d79',
};

export default Place